/**
 * ZHX CTC SCSS
 *
 * Author : Vicco Wang
 * Date : 2016.10.11
 * 
 */
//直线图部分

.zhx-ctc-center{
	position:relative;
	@include use-flex;
	@include flex-column;
	@include flex-align-center;
	width:100%;height:100%;
	flex:1;
	z-index:1;
	background-color:$lightBaseColor;
	//直线图图示
	.zhx-ctc-center-legend{
		position:absolute;
		width:calc( 100% - 240px );
		// height:30px;
		top:0;left:120px;
		z-index:1;
		background-color: lighten( $lightBaseColor, 100% );
		border-bottom:1px solid darken( $lightBaseColor, 10% );

		ul{
			@include use-flex;
			width: 100%;height:100%;
			font-size:.8em;
	
			li{
				padding:5px 10px;
				border-right:1px solid $lightBaseColor;

				span{
					display: inline-block;
					margin:2px 5px 0 0;

					&.status_g { color : #388E3C }
					&.status_b { color : #0288D1 }
					&.status_o { color : #F57C00 }
					&.status_y { color : #FFEE58 }
					&.status_d { color : #795548 }
					&.status_lb { color : #00ACC1 }
					&.status_gy { color : #9E9E9E }
					&.status_pr { color : #673AB7 }
					&.status_gr { color : #FFA726 }
					&.status_r { color : $redColor }

				}

			}

			// @media screen and ( max-width: 1040px ){
			// 	li {
			// 		@include use-flex;
			// 		@include flex-column;
			// 		@include flex-align-center;

			// 		span{ margin: 0 }
			// 	}
			// }

		}

	}

	.zhx-ctc-subline-tabs{
		width:calc( 100% - 240px );
		height:30px;
		margin-top:31px;
		border-bottom: 1px solid darken( $lightBaseColor, 2% );

		>ul{
			width:100%;height:100%;
			@include use-flex;

			>li{
				@include use-flex;
				@include flex-align-center;
				height:100%;
				padding:0 20px;
				border-right:1px solid darken( $lightBaseColor, 7% );
				background-color: darken( $lightBaseColor, 2% );
				cursor: pointer;
				@include no-select;

				&.active{
					background-color: lighten( $lightBaseColor, 100% );
					border-bottom:1px solid lighten( $lightBaseColor, 100% );
				}

				&:not(.active):hover{
					background-color: darken( $lightBaseColor, 5% );
				}
				
			}
		}
	}

	// @media screen and ( max-width: 1040px ){
	// 	.zhx-ctc-subline-tabs{ margin-top:45px; }
	// }

	//直线图两侧区域
	.placing-area{
		position:absolute;
		top:0;
		width:120px;height:100%;
		z-index:2;
		@include use-flex;
		@include flex-column;

		>div {
			flex:1;
			position:relative;

			&:after{
				position:absolute;
				top:0;left:0;
				width:100%;height:100%;
				font-size:1.7em;
				letter-spacing: 20px;
				@include use-flex;
				@include flex-align-center;
				writing-mode: tb-rl;
				z-index:0;
			}

			>ul {
				position:relative;
				@include use-flex;
				@include flex-column;	

				>li {
					@include use-flex;
					@include flex-align-center;
					position:relative;
					height:25px;
					padding-left:3px;
					font-size:.85em;	
					margin:2px;
					border-radius:5px;
					z-index:2;
					color: lighten( $baseColor, 10% );

					>span{

						&.bus-no{
							flex:1;
						}
						&.bus-plan-time{
							width:35px;
							margin-left:3px;
						}
					}

					&:before{
						margin-right:3px;
					}

				}
			}

		}
	}
	//左侧区域
	.zhx-ctc-up-going{
		left:0;
		@include use-flex;
		@include flex-column;
		//上行待发
		.upgo-waiting-area{
			background-color: $lightGreenColor;

			&:after{
				content:'上行待发';
				color : darken( $lightGreenColor, 7% );
			}

			>ul{

				>li{
					background-color : rgba( 255, 255, 255, .4);

					>span{

						&.bus-plan-time{
							color: darken( $greenColor, 10% );
						}
					}

					&:before{
						color: darken( $greenColor, 10% );
					}
				}
			}

			
		}
		//上行非运营
		.upgo-non-service{
			background-color: $lightYellowColor;

			&:after{
				content:'非运营';
				color : lighten( $yellowColor, 12% );
			}

			>ul{

				>li{
					background-color : rgba( 255, 255, 255, .6);

					>span{

						&.bus-plan-time{
							color: darken( $orangeColor, 5% );
						}
					}

					&:before{
						color: darken( $orangeColor, 5% );
					}
				}
			}
		}
	}
	//右侧区域
	.zhx-ctc-down-going{
		right:0;
		//下行待发
		.downgo-waiting-area{
			background-color: $lightGreenColor;

			&:after{
				content:'下行待发';
				color : darken( $lightGreenColor, 7% );
			}

			>ul{

				>li{
					background-color : rgba( 255, 255, 255, .4);

					>span{

						&.bus-plan-time{
							color: darken( $greenColor, 10% );
						}
					}

					&:before{
						color: darken( $greenColor, 10% );
					}
				}
			}
		}
		//下行非运营
		.downgo-non-service{
			background-color: $lightYellowColor;

			&:after{
				content:'非运营';
				color : lighten( $yellowColor, 12% );
			}

			>ul{

				>li{
					background-color : rgba( 255, 255, 255, .6);

					>span{

						&.bus-plan-time{
							color: darken( $orangeColor, 5% );
						}
					}

					&:before{
						color: darken( $orangeColor, 5% );
					}
				}
			}

		}
	}
	//直线图部分
	.zhx-ctc-liear-map{
		@include use-flex;
		@include flex-align-center;
		@include flex-column;
		width:calc( 100% - 240px );
		height:calc( 100% - 140px );
		// margin-top:30px;
		background-color:lighten( $lightBaseColor, 20% );

		>div {
			width:100%;
			height:50%;
			@include use-flex;
			@include flex-align-center;
			position:relative;

			&.ctc-liearMap-up{
				// border-bottom :1px solid  $lightBaseColor;

				.ctc-liear-line-wrapper{
					top : -20px;
				}
			}

			&.ctc-liearMap-down{
				.ctc-liear-line-wrapper{
					top : -20px;
				}
			}

			> .ctc-liear-line-wrapper{
				@include use-flex;
				@include flex-align-center;
				position:relative;
				width:92%;height:5px;
				background-color: $greenColor;
				border-radius:6px;

				.ctc-liear-line{
					position:relative;
					width:95%;
					height:5px;

					> ul.ctc-line-bus{
						width:100%;
						
						>li {
							position:absolute;
							width:1px;
							@include frame-transition();

							span{

								&.zhx-ctc-bus-icon{
									position:relative;
									font-size:18px;
									color: #00C853;

									&.busActiveClass{
										left: -11px !important;top:-2px !important;
										font-size:24px !important;
										color : $lightBlueColor !important;
										z-index:999;
									}

								}

								&.zhx-ctc-bus-info{
									font-size:.9em;
								}

								&.up-bus{
									left:-8px;
								}
								&.down-bus{
									right:8px;
								}

							}

						}

					}

					> ul.ctc-line-station {
						width : 100%;

						>li {
							position:absolute;

							>span {
								display: inline-block;

								&.line-map-dot{
									@include use-flex;
									@include flex-align-center;
									position:absolute;
									left:-6px;top:-4px;
									width:12px;height:12px;
									background-color:$greenColor;
									border-radius:100%;
									color: $lightBaseColor;
									
									&.firstStation-dot, &.lastStation-dot{
										left:-11px;top:-8px;
										width:22px;height:22px;
										font-size:.9em;
									}
									&.firstStation-dot:before{
										content:'起'
									}
									&.lastStation-dot:before{
										content:'终'
									}
									
								}

								&.line-map-Name{
									position:absolute;
									// writing-mode:tb-rl;
									width:auto;
									text-align:right;
									left:-6px;top:14px;
									transform-origin:0 0;
									transform : rotate(35deg);
									font-size:.8em;
									line-height: 120%;
									@include no-select;
								}

								@media screen and ( max-width: 1200px ){

									&.line-map-Name{
										top:14px;
										transform : rotate(0deg);
									}
								}

							}
						}
					}
				}

			}

		}

	}

	// @media screen and ( max-width: 1300px ){
	// 	.zhx-ctc-liear-map{ margin-top:45px; }
	// }

	//离线与停运
	.zhx-ctc-center-bottom{
		@include use-flex;
		width:calc( 100% - 240px );
		height:80px;
		background-color: $blueColor;

		.bottom-placing-area{
			position:relative;
			padding-left:5px;
				
			&:after{
				position:absolute;
				top:0;left:0;
				width:100%;height:100%;
				font-size:1.7em;
				letter-spacing: 24px;
				@include use-flex;
				@include flex-align-center;
				z-index:0;
			}

			>ul {
				position:relative;
				height:100%;
				@include use-flex;
				flex-wrap : wrap;

				>li{
					position:relative;
					font-size:.9em;
					@include use-flex;
					@include flex-align-center;
					height:24px;
					margin:0 2px;
					border-radius:5px;
					line-height:normal;
					z-index:2;

					&:before{
						margin-right:3px;
					}
				}
			}
		}

		.offline-bus{
			width:70%;
			max-width:80%;
			background-color : darken( $lightBaseColor, 3% );

			&:after{
				content:'离线';
				color : darken( $lightBaseColor, 10% );
				
			}

			>ul{

				>li{

					&:before{
						color: darken( $lightBaseColor, 25% );
					}
				}
			}

		}

		.offline-none-service{
			flex:1;
			background-color : lighten( $redColor, 27% );

			&:after{
				content:'停运';
				color : lighten( $redColor, 22% );
			}

			>ul{

				>li{
					&:before{
						color: lighten( $redColor, 5% );
					}
				}
			}
		}

	}

}